<template>
  <div class="chat-popup" v-if="isVisible">
    <div class="popup-header">
      <h3>聊天窗口</h3>
      <span class="close-btn" @click="closeChat">×</span>
    </div>
    <div class="chat-container">
      <!-- 在线用户列表 -->
      <div class="user-list">
        <h3>在线用户</h3>
        <ul>
          <li
              v-for="user in onlineUsers"
              :key="user"
              @click="selectUser(user)"
              :class="{ active: user === targetUser }"
          >
            {{ user }}
          </li>
        </ul>
      </div>
      <!-- 聊天窗口 -->
      <div class="chat-window">
        <div class="messages" ref="messagesContainer">
          <div
              v-for="(msg, index) in messages"
              :key="index"
              :class="msg.isSelf ? 'message self' : 'message other'"
          >
            <strong>{{ msg.sender }}:</strong> {{ msg.text }}
          </div>
        </div>
        <div class="input-area">
          <input
              v-model="message"
              type="text"
              placeholder="输入消息"
              @keyup.enter="sendMessage"
          />
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useChatStore } from "../../piniaStore/pinia.js";
import { computed, ref } from "vue";

export default {
  setup() {
    const chatStore = useChatStore();
    const isVisible = ref(true);

    const onlineUsers = computed(() => chatStore.onlineUsers);
    const messages = computed(() => chatStore.messages);
    const targetUser = computed({
      get: () => chatStore.targetUser,
      set: (value) => (chatStore.targetUser = value),
    });
    const message = computed({
      get: () => chatStore.message,
      set: (value) => (chatStore.message = value),
    });

    const sendMessage = () => {
      chatStore.sendMessage();
    };

    const selectUser = (user) => {
      chatStore.selectUser(user);
    };

    const closeChat = () => {
      isVisible.value = false;
    };

    return {
      onlineUsers,
      messages,
      targetUser,
      message,
      sendMessage,
      selectUser,
      isVisible,
      closeChat,
    };
  },
};
</script>

<style scoped>
.chat-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 400px;
  height: 500px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.popup-header h3 {
  margin: 0;
}

.close-btn {
  cursor: pointer;
  font-size: 24px;
  color: #666;
}

.close-btn:hover {
  color: #333;
}

.chat-container {
  display: flex;
  height: calc(100% - 50px);
}

.user-list {
  width: 30%;
  border-right: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
}

.user-list ul {
  list-style: none;
  padding: 0;
}

.user-list li {
  padding: 10px;
  cursor: pointer;
}

.user-list li.active {
  background-color: #007bff;
  color: white;
}

.chat-window {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  border-bottom: 1px solid #ccc;
}

.message {
  margin-bottom: 10px;
}

.message.self {
  text-align: right;
}

.input-area {
  display: flex;
  padding: 10px;
}

.input-area input {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
}

.input-area button {
  padding: 10px;
}
</style>
